import { vw } from '@/common/dimensions';
import React, { useEffect, useRef, useState } from 'react'
import { Animated, Image, StyleSheet, View } from 'react-native'
export default function MineBanner() {
    const [width] = useState(new Animated.Value(92 * vw)); // 初始宽度为100
    const startAnimation = () => {
        Animated.loop(
            // sequence 按顺序执行一个动画数组里的动画
            Animated.sequence([
                // 从 92vw 缩小到 0vw
                Animated.timing(width, {
                    toValue: 0 * vw, // 目标宽度 80vw
                    duration: 2000, // 持续时间
                    useNativeDriver: false, // 因为我们在改变布局属性，不能使用 useNativeDriver
                }),
                // 再从 0vw 放大回 92vw（镜像运动）
                Animated.timing(width, {
                    toValue: 92 * vw, // 返回初始宽度 92vw
                    duration: 2000, // 持续时间
                    useNativeDriver: false,
                })
            ])
        ).start();
    };
    useEffect(() => {
        startAnimation()
    }, [])

    return (
        <View style={{marginTop:16}}>
            <Animated.View
                style={[ { zIndex: 1, width , height:150 , overflow:'hidden' }]}
            >
                <Image style={[{width:92*vw , height:150}]} resizeMode={'contain'} source={require('@/assets/mine/banner1_cn.png')} />
            </Animated.View>
            <Image style={[styles.bannerImage, styles.overlap]} resizeMode={'contain'} source={require('@/assets/mine/banner2_cn.png')} />
        </View>
    )
}
const styles = StyleSheet.create({
    bannerImage: {
        width: 92 * vw,
        height: 150
    },
    overlap: {
        position: 'absolute',
        top: 0,
        left: 0
    },
})